import React, { createElement } from "react";
import MenuConfig from '../../config/index'
import * as Icon from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;

const iconElement = (name) =>React.createElement(Icon[name])

const items = MenuConfig.map(icon => {
    const child = {
        key: icon.path,
        icon: iconElement(icon.icon),
        label: icon.label,
        
    }

    if(icon.children){
            child.children = icon.children.map(item =>{
                return {
                    key: item.path,
                    label: item.label
                }
            })
        }

     return child
} )

const CommonAside = ({collapsed}) =>{
    console.log(collapsed,'commonAside')
    return (
        <Sider trigger={null} collapsible collapsed={collapsed}>
        <h3 className="app-name">{collapsed?"后台":"后台通用管理系统"}</h3>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
          style={{height: '100%'}}
        />
      </Sider>
    )
}

export default CommonAside